<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper" v-if="title === '供应商选择'">
          <a-form layout="inline" @keyup.enter.native="searchQuery">
            <a-row :gutter="24">
              <a-col :xl="6" :lg="7" :md="8" :sm="24">
                <a-form-item label="供应商代码">
                  <a-input placeholder="请输入供应商代码" v-model.trim="queryParam.code"></a-input>
                </a-form-item>
              </a-col>
              <a-col :xl="6" :lg="7" :md="8" :sm="24">
                <a-form-item label="供应商名称">
                  <a-input placeholder="请输入供应商名称" v-model.trim="queryParam.name"></a-input>
                </a-form-item>
              </a-col>
              <a-col :xl="6" :lg="7" :md="8" :sm="24">
                <a-form-item label="付款方式">
                  <j-dict-select-tag placeholder="请选择付款方式" v-model="queryParam.paymentMethod" dictCode="product_supplier_payment_method"/>
                </a-form-item>
              </a-col>
              <template v-if="toggleSearchStatus">
                <a-col :xl="6" :lg="7" :md="8" :sm="24">
                  <a-form-item label="采购员">
                    <j-search-select-user v-model="queryParam.buyer" placeholder="请输入并选择采购员"></j-search-select-user>
                  </a-form-item>
                </a-col>
                <a-col :xl="6" :lg="7" :md="8" :sm="24">
                  <a-form-item label="状态">
                    <j-dict-select-tag type="list" v-model="queryParam.supplierStatus" dictCode="product_supplier_status" placeholder="请选择状态" disabled />
                  </a-form-item>
                </a-col>
                <a-col :xl="6" :lg="7" :md="8" :sm="24">
                  <a-form-item label="创建人">
                    <j-search-select-user v-model="queryParam.createBy" placeholder="请输入并选择创建人"></j-search-select-user>
                  </a-form-item>
                </a-col>
                <a-col :xl="6" :lg="7" :md="8" :sm="24">
                  <a-form-item label="联系方式">
                    <a-input placeholder="请输入联系方式" v-model="queryParam.contactPhone"></a-input>
                  </a-form-item>
                </a-col>
              </template>
              <a-col :xl="6" :lg="7" :md="8" :sm="24">
                <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                  <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                  <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
                  <a @click="handleToggleSearch" style="margin-left: 8px">
                    {{ toggleSearchStatus ? '收起' : '展开' }}
                    <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
                  </a>
                </span>
              </a-col>
            </a-row>
          </a-form>
          <a-table
            ref="table"
            size="middle"
            :scroll="{x:true}"
            bordered
            rowKey="id"
            :columns="columns"
            :dataSource="dataSource"
            :pagination="ipagination"
            :loading="loading"
            :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange, type: 'radio'}"
            class="j-table-force-nowrap">
            <template slot="supplierStatusSlot" slot-scope="text, record">
              <a-tag :color="getColor(record)" v-if="text">{{ text }}</a-tag>
            </template>
          </a-table>
        </div>
        <div v-else-if="title === '元素图'">
          <div style="margin-bottom: 10px;">
            <a-button style="background: #70b603; color: #fff;" @click="handleElementTag">选择元素</a-button>
          </div>
          <div class="element-list">
            <a-checkbox-group v-model="model.elementImageList">
              <div v-for="(item, index) in elementList" :key="index">
                <a-checkbox :value="imgItem.imageUrl" v-for="(imgItem, imgIndex) in item.elementImageList" :key="imgIndex">
                  <img :src="imgItem.imageUrl">
                </a-checkbox>
              </div>
            </a-checkbox-group>
          </div>
        </div>
        <div v-else>
          <j-upload-oss v-model="model.imageList" fileType="image" bizPath="product"></j-upload-oss>
        </div>
      </a-form-model>
    </j-form-container>

    <product-library-sku-element-modal ref="modalForm" @ok="modalFormOk"></product-library-sku-element-modal>
  </a-spin>
</template>

<script>
  import { mixinDevice } from '@/utils/mixin'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import { productMixins } from '@/views/productLibrary/mixins/productMixins'
  import ProductLibrarySkuElementModal from '@/views/productLibrary/modules/SkuSubmodule/ProductLibrarySkuElementModal'
  export default {
    name: 'ProductLibrarySkuChildForm',
    mixins:[JeecgListMixin, mixinDevice, productMixins],
    components: {
      ProductLibrarySkuElementModal
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      },
      title: {
        type: String,
        default: ''
      }
    },
    data () {
      return {
        model:{
         },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        validatorRules: {
        },
        // 表头
        columns: [
          {
            title: '#',
            dataIndex: '',
            key:'rowIndex',
            width:60,
            align:"center",
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
          },
          {
            title:'供应商代码',
            align:"center",
            dataIndex: 'code'
          },
          {
            title:'供应商名称',
            align:"center",
            dataIndex: 'name'
          },
          {
            title:'付款方式',
            align:"center",
            dataIndex: 'paymentMethod_dictText'
          },
          {
            title:'采购员',
            align:"center",
            dataIndex: 'buyer'
          },
          {
            title:'90天退款率',
            align:"center",
            dataIndex: 'ninetyDayRefundRate',
            customRender: function (text) {
              return !text ? '' : `${text}%`
            },
          },
          {
            title:'2年退款率',
            align:"center",
            dataIndex: 'twoYearRefundRate',
            customRender: function (text) {
              return !text ? '' : `${text}%`
            },
          },
          {
            title:'回货率',
            align:"center",
            dataIndex: 'returnRate',
            customRender: function (text) {
              return !text ? '' : `${text}%`
            },
          },
          {
            title:'是否滞销可退',
            align:"center",
            dataIndex: 'isRetentionRefund_dictText'
          },
          {
            title:'状态',
            align:"center",
            dataIndex: 'supplierStatus_dictText',
            scopedSlots: { customRender: 'supplierStatusSlot' }
          },
          {
            title:'创建人',
            align:"center",
            dataIndex: 'createBy'
          },
          {
            title:'创建时间',
            align:"center",
            dataIndex: 'createTime'
          }
        ],
        url: {
          list: '/hzkj-product/product/productLibrary/supplier/listByDataRule'
        },
        disableMixinCreated: true,
        elementList: []
      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      }
    },
    watch: {
      dataSource: {
        immediate: true,
        handler(){
          if(this.model.supplierId){
            this.selectedRowKeys = [ this.model.supplierId ];
            this.selectionRows = this.dataSource.filter(item => item.id === this.model.supplierId);
          }
        }
      }
    },
    created () {
      //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
    },
    methods: {
      add () {
        this.edit(this.modelDefault);
      },
      edit (record) {
        this.model = Object.assign({}, record);
        this.visible = true;
        if(this.title === '供应商选择'){
          // 过滤状态为黑名单的数据
          this.queryParam.supplierStatusArray = '1';
          this.queryParam.categoryId = this.model.categoryId;
          this.loadData();
        }
      },
      submitForm () {
        if(this.title === '供应商选择'){
          if(!(this.selectionRows && this.selectionRows.length)){
            this.$message.warning('请选择供应商');
            return;
          }
          this.$emit('ok', this.selectionRows);
        }else{
          if(this.title === '元素图'){
            if(!(this.model.elementImageList && this.model.elementImageList.length)){
              this.$message.warning('请选择图片!');
              return;
            }
            let elementList = [];
            this.elementList.forEach(item => {
              elementList = [...elementList, ...item.elementImageList];
            })
            this.$emit('ok', {
              title: this.title, 
              imageList: elementList.filter(item => this.model.elementImageList.indexOf(item.imageUrl) > -1) || []
            });
          }else{
            if(!(this.model.imageList && this.model.imageList.length)){
              this.$message.warning('请选择图片!');
              return;
            }
            this.$emit('ok', {
              title: this.title, 
              imageList: this.model.imageList
            });
          }
        }
      },
      handleElementTag(){
        this.$refs.modalForm.add();
        this.$refs.modalForm.title = "元素选择";
        this.$refs.modalForm.disableSubmit = false;
      },
      modalFormOk(selectionRows){
        this.elementList = selectionRows;
      },
      searchReset(){
        // 过滤状态为黑名单的数据
        this.queryParam.supplierStatusArray = '1';
        this.queryParam.categoryId = this.model.categoryId;
        this.loadData(1);
      }
    }
  }
</script>

<style lang="less" scoped>
/deep/.ant-form-item{
  flex-direction: row !important;
}
.element-list{
  width: 100%;
  display: flex;
  justify-content: flex-start;
  .ant-checkbox-group{
    width: 100%;
  }
  img{
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 4px;
  }
  /deep/.ant-checkbox-wrapper{
    width: calc((100% - 72px) / 10);
    position: relative;
    .ant-checkbox{
      position: absolute;
      left: 0;
      top: 0;
    }
  }
  /deep/.ant-checkbox-wrapper:nth-child(10n + 1){
    margin-left: 0;
  }
  /deep/.ant-checkbox-wrapper:nth-child(n + 11){
    margin-top: 10px;
  }
  /deep/.ant-checkbox + span{
    padding: 0;
  }
}
</style>